<template>
  <div>
    <div>
      <span>ref 定义的响应式变量: </span>
      {{ num }}
      <button @click="add">＋</button>
    </div>

    <div>
      <span>reactive 定义的响应式变量: </span>
      {{ user.age }}
      <button @click="minus">－</button>
    </div>

  </div>
</template>

<script setup>
import {ref, reactive} from 'vue';

let num = ref(1);

let user = reactive({
  age: 10
})

const add = () => {
  console.log(num);
  num.value++;
}


const minus = () => {
  console.log(user);
  user.age++;
}



</script>


<style>

</style>
